<template>
  <div>
    <div class="empty-box fade-show">
      <template v-if="img < 7">
        <image
          :src="$utils.staticimg(imgs[Number(img)])"
          mode="widthFix"
        ></image>
      </template>
      <div class="text">{{ text }}</div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "empty",
};
</script>
<script lang="ts" setup>
import { ref, getCurrentInstance } from "vue";

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    text?: string;
    img?: string | number;
  }>(),
  {
    text: "暂无数据",
    img: 0,
  }
);

const imgs = ref<string[]>([
  "empty/0.png",
  "empty/1.png",
  "empty/2.png",
  "empty/3.png",
  "empty/4.png",
  "empty/5.png",
  "empty/6.png",
]);
</script>

<style scoped>
.empty-box {
  text-align: center;
  margin: 100rpx auto;
  animation: fadeShow 0.3s;
}
.empty-box image {
  height: 120rpx;
  width: 120rpx;
}
.empty-box .text {
  color: var(--base-grey);
  line-height: 100rpx;
}
</style>
